<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Easyui_Tree</title>
    <link rel="stylesheet" type="text/css" href="static/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="static/easyui/themes/demo.css"/>
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script>
        function clickToShow() {
            var node=$("#tt").tree("getSelected");
            alert(node.text);
        }
    </script>
</head>
<body>
    <h2>Basic Tree</h2>
    <span id="chose" onclick="clickToShow()">ClickHere</span>
    <div class="easyui_panel" style="padding: 5px;">
        <ul id="tt" class="easyui-tree">
            <li data-options="state:'closed'">
                <span>科目</span>
                <ul>
                    <li>语文</li>
                    <li>数学</li>
                    <li>英语</li>
                    <li>物理</li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>国家</span>
                <ul>
                    <li>中国</li>
                    <li>俄罗斯</li>
                    <li>美国</li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>武器</span>
                <ul>
                    <li>刀</li>
                    <li>枪</li>
                    <li>火炮</li>
                </ul>
            </li>
            <li value="fourth">第四天</li>
        </ul>
    </div>
</body>
</html>